import { Form, Input, Button, Checkbox } from 'antd';
import { useState } from 'react';
import styles from './index.less'
import { connect } from "umi";
import { IAdmin, loginReq } from '@/service/login';
import { useMount } from 'ahooks'

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

function Demo (props:any)  {
  const [ height, setHeight ] = useState(0)
  const [ width, setWidth ] = useState(0)
  useMount(() => {
    const phone: any = document.querySelector('.formtable___2sbY8')
    // 获取页面可视区域的高度
    const h: number = parseInt(window.getComputedStyle(phone).height)
    const w: number = parseInt(window.getComputedStyle(phone).width) 
    if(w + 30 <h){
      // console.log(123);
      phone.style.padding = '0'
    } else {
      // console.log(456456);     
      phone.style.padding = '30px 80px'
    }
    window.onresize = ()=>{
      // const box: any = document.querySelector('.Divv___3yUAj')
      // console.log(w < h); 
      const he: number = parseInt(window.getComputedStyle(phone).height)
      const wi: number = parseInt(window.getComputedStyle(phone).width) 
      if(wi + 30 <he){
        // console.log(123);
        phone.style.padding = '0'
      } else {
        // console.log(456456);     
        phone.style.padding = '30px 80px'
      }
    }
    
  })
  const onFinish = (values: IAdmin) => {
    console.log('Received values of form: ', values);
    props.dispatch({
      type: 'login/login',
      payload: values
    })
  };

  const onFinishFailed = (errorInfo:any) => {
    console.log('Failed:', errorInfo);
  };

  return (
      <div className={styles.Divv}>
            <Form
        {...layout}
        name="basic"
        initialValues={{
            remember: true,
        }}
        labelAlign='left'
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        className={styles.formtable}
        >
        <Form.Item
            label="用户名"
            name="adminname"
            rules={[
            {
                pattern:/^[a-zA-Z0-9_-]{4,16}$/,
                required: true,
                message: '请输入4到16位字母，数字，下划线，减号',
            },
            ]}
        >
            <Input />
        </Form.Item>

        <Form.Item
            label="密码"
            name="password"
            rules={[
            {
                // pattern:/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/,
                required: true,
                message: '请输入最少6位，包括至少1个大写字母，1个小写字母，1个数字',
            },
            ]}
        >
            <Input.Password />
        </Form.Item>

        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
            <Checkbox>记录</Checkbox>
        </Form.Item>

        <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
            登录
            </Button>
        </Form.Item>
        </Form>
      </div>
  );
};

export default connect()(Demo)
